<template>
    <div>
      <div :id="id" :style="{width: width, height: height}"  v-loading="true"></div>
      <!-- <el-alert
        title="成功提示的文案"
        type="success">
      </el-alert> -->
<!--       <el-button :plain="true" @click="Sucmsg">
      成功
      </el-button> -->
    </div>

</template>

<script>
  import echarts from 'echarts';
  import { Message } from 'element-ui';
  import axios from 'axios';
  import {westeros} from '../../components/Echarts/theme/westeros';
  import {FontToDay,DayOrder} from '../../api/autopay'; 
  import {urlEncode,urlDecode} from '../../js/index';
  export default {
    name: 'Echart_Font_Down',
    props: {
      id: {
        type: String,
        default: 'myChart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        chart: null,
        OppoHDList:[],
        VivoHDList:[],
        DateList:[],
        Eloading: false,
      }
    },

    mounted() {
      this.FontToDays();
    },

    methods: {
      Sucmsg() {
        this.$message({
          message: "dfdsdsfsd",
          type: 'success'
        });
        var destr = urlDecode("http://hwdev.fzshouji.com/sjzz/fontshowArticle?&title=%E7%B2%BE%E4%BF%AE%E5%B0%8F%E6%AD%A3%E5%8F%A4%E4%BD%93&z=cHYTTl9w");
      }, 
      FontToDays() {
        let oppo = {"platform":"oppo"};
        let vivo = {"platform":"vivo"};
        this.Eloading = true;
        FontToDay(vivo).then(res => {
          let { code, msg, data } = res;
          if (code == 200) {
            
              for (var i = data.length - 1; i >= 0; i--) {
              
                this.VivoHDList.push(data[i].Count);
                this.DateList.push(data[i].Create);
              }
            
            this.Eloading = false;
            
          }else{
            this.$message.error(data);
          }
          }).catch( () => {
              this.$message.error("数据请求失败");
        });
        FontToDay(oppo).then(res => {
          
          let { code, msg, data } = res;
          if (code == 200) {
            
              for (var i = data.length - 1; i >= 0; i--) {
                
                this.OppoHDList.push(data[i].Count);
                
                
              }
              this.initChart();
          }else{
            this.$message.error(data);
          }
          }).catch( () => {
              this.$message.error("数据请求失败");
          });
          
          
      },
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id),'westeros');
        this.chart.setOption({
          title: {
            text: '近7天字体下载汇总'
          },
          tooltip: {
            trigger: 'axis',
            borderColor: '#DD0C32',
          },
          legend: {
            data:['OPPO字体下载数',"VIVO字体下载数"]
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.DateList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'OPPO字体下载数',
              type:'line',
              stack: '总量',
              borderWidth: 1,
              data:this.OppoHDList
            },
            {
              name:'VIVO字体下载数',
              type:'line',
              stack: '总量',
              data:this.VivoHDList
            }
            // {
            //   name:'设备数量',
            //   type:'line',
            //   stack: '总量',
            //   data:[8200, 6320, 5010, 4340, 3400, 2300, 1200]

            // },
            // {
            //   name:'模拟器数',
            //   type:'line',
            //   stack: '总量',
            //   data:[2200, 3820, 1910, 2340, 4900, 3300, 1100]
            // }
            
          ]
        })
        
      }
    }
  }
</script>

<style scoped>

</style>
